<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>

<body>
    <div class="nav">
        <img src="image/image1.jpg" alt="">
        <span class="title">博客系统</span>
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="logout" onclick='logout()'>注销</a>
    </div>
    <div class="container">
        <div class="left">
            <div class="card">
                <img src="image/image1.jpg" alt="">
                <h3></h3>
                <a href=''></a>
                <div class="articlenumber">
                    <span>文章数:</span>
                </div>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>

        </div>
        <div class="right">
            <div id="unart" style="text-align:center;display:none;">
                <h3>当前用户未发表文章</h3>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"> </script>
    <script>
        var userId = 0;
        jQuery.ajax({
            url: 'user/loginstate',
            type: 'GET',
            success: function (result) {
                if (result != null && result.success == 200) {
                    if (result.data != null && result.data.userId > 0) {
                        userId = result.data.userId;
                        changeUser(result.data);
                        createBlogList(userId);
                    } else {
                        alert("请先登录！")
                        location.href = "login.html";
                    }
                }
            }
        });
        function createBlogList(userId) {
            jQuery.ajax({
                url: 'blog/getmyblogs',
                type: 'GET',
                data: { 'userId': userId },
                success: function (result) {
                    if (result != null && result.success == 200) {
                        var blogList = result.data;
                        if (blogList != null && blogList.length > 0) {
                            buildBlogs(blogList);
                        }
                    } else {
                        alert("未登录，请先登录！");
                        location.href('login.html');
                    }
                }
            })
        }

        function formatDate(timeStampMS) {
            var date = new Date(timeStampMS);

            var year = date.getFullYear(),
                month = date.getMonth() + 1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
                (month < 10 ? '0' + month : month) + '-' +
                (day < 10 ? '0' + day : day) + ' ' +
                (hour < 10 ? '0' + hour : hour) + ':' +
                (min < 10 ? '0' + min : min) + ':' +
                (sec < 10 ? '0' + sec : sec);
            return newTime;
        }

        function buildBlogs(blogs) {

            let rightDiv = document.querySelector('.container .right');
            //文章数
            let articles = document.createElement('span');
            articles.className = 'articles';
            articles.innerHTML = blogs.length;
            let articleNumber = document.querySelector('.card>.articlenumber');
            articleNumber.appendChild(articles);
            for (let blog of blogs) {
                //构造博客
                let blogDiv = document.createElement('div');
                blogDiv.className = 'blog';
                //构造博客的标题
                let titleDiv = document.createElement('div');
                titleDiv.className = 'title';
                titleDiv.innerHTML = blog.title;
                blogDiv.appendChild(titleDiv);
                //构造博客的时间
                let dateDiv = document.createElement('div');
                dateDiv.className = 'date';
                dateDiv.innerHTML = formatDate(blog.postTime);
                blogDiv.appendChild(dateDiv);
                //构造博客的正文
                let descDiv = document.createElement('div');
                descDiv.className = 'desc';
                descDiv.innerHTML = blog.content;
                blogDiv.appendChild(descDiv);
                //构造博客的查看全文
                let detailA = document.createElement('a');
                detailA.className = 'detail';
                detailA.innerHTML = '查看全文 &gt &gt;';
                detailA.href = 'blog_detail.html?blogId=' + blog.blogId;
                blogDiv.appendChild(detailA);

                rightDiv.appendChild(blogDiv);
            }
        }

        function changeUser(user) {
            let h3 = document.querySelector('.card>h3');
            h3.innerHTML = user.username;

            //gitlink
            let gita = document.querySelector('.card>a');
            gita.innerHTML = user.github;
            gita.href = user.github;

            //添加用户管理
            let navDiv = document.querySelector('.nav');
            let userEditButton = document.createElement('a');
            userEditButton.innerHTML = '用户管理';
            userEditButton.href = 'user_edit.html?userId=' + user.userId;
            navDiv.appendChild(userEditButton);
        }
        function logout() {
            if (confirm("是否退出？")) {
                jQuery.ajax({
                    url: "user/logout",
                    type: "POST",
                    success: function (result) {
                        if (result != null && result.success == 200 && result.data == 1) {
                            alert("退出成功！");
                            location.href = "index.html";
                        } else {
                            alert("抱歉：操作出错，请重试！");
                        }
                    }
                });
                l
            }
        }
    </script>
</body>

</html>